<template>
  <view 
    v-if="show"
    class="fu-notice-bar"
    :class="[
      `fu-notice-bar--${type}`,
      { 'fu-notice-bar--scrollable': scrollable }
    ]"
    @click="onClick"
  >
    <!-- 左侧图标 -->
    <text 
      v-if="showIcon"
      class="fu-notice-bar__icon fu-icon"
    >{{ iconMap[type] }}</text>
    
    <!-- 文本内容 -->
    <view class="fu-notice-bar__content">
      <view 
        class="fu-notice-bar__text"
        :class="{ 'fu-notice-bar__text--scrollable': scrollable }"
        :style="{ animationDuration: `${duration}s` }"
      >{{ text }}</view>
      <view 
        v-if="scrollable"
        class="fu-notice-bar__text fu-notice-bar__text--scrollable"
        :style="{ animationDuration: `${duration}s` }"
      >{{ text }}</view>
    </view>
    
    <!-- 右侧图标 -->
    <text 
      v-if="closeable"
      class="fu-notice-bar__close fu-icon"
      @click.stop="onClose"
    >&#xe6e7;</text>
  </view>
</template>

<script>
/**
 * fu-notice-bar 通知栏组件
 * @description 用于循环播放展示通知信息
 * @property {Boolean} show - 是否显示
 * @property {String} text - 通知文本内容
 * @property {String} type - 主题类型，可选值为 info warning error
 * @property {Boolean} showIcon - 是否显示左侧图标
 * @property {Boolean} closeable - 是否显示关闭按钮
 * @property {Boolean} scrollable - 是否开启滚动播放
 * @property {Number} speed - 滚动速度，单位px/s
 * @event {Function} click - 点击通知栏时触发
 * @event {Function} close - 关闭时触发
 */
export default {
  name: 'fu-notice-bar',
  props: {
    show: {
      type: Boolean,
      default: true
    },
    text: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'info',
      validator: value => ['info', 'warning', 'error'].includes(value)
    },
    showIcon: {
      type: Boolean,
      default: true
    },
    closeable: {
      type: Boolean,
      default: false
    },
    scrollable: {
      type: Boolean,
      default: false
    },
    speed: {
      type: Number,
      default: 50
    }
  },
  emits: ['update:show', 'click', 'close'],
  data() {
    return {
      iconMap: {
        info: '&#xe6e3;',
        warning: '&#xe6e6;',
        error: '&#xe6e8;'
      },
      duration: 0
    }
  },
  mounted() {
    if (this.scrollable) {
      this.$nextTick(() => {
        const textWidth = this.$el.querySelector('.fu-notice-bar__text').offsetWidth
        const contentWidth = this.$el.querySelector('.fu-notice-bar__content').offsetWidth
        
        if (textWidth > contentWidth) {
          this.duration = textWidth / this.speed
        }
      })
    }
  },
  methods: {
    onClick() {
      this.$emit('click')
    },
    onClose() {
      this.$emit('update:show', false)
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
.fu-notice-bar {
  display: flex;
  align-items: center;
  height: 72rpx;
  padding: 0 24rpx;
  font-size: 28rpx;
  
  // 主题样式
  &--info {
    background-color: rgba(var(--fu-info-color-rgb), 0.1);
    color: var(--fu-info-color);
  }
  
  &--warning {
    background-color: rgba(var(--fu-warning-color-rgb), 0.1);
    color: var(--fu-warning-color);
  }
  
  &--error {
    background-color: rgba(var(--fu-danger-color-rgb), 0.1);
    color: var(--fu-danger-color);
  }
  
  &__icon {
    font-family: 'fuIcon';
    font-size: 36rpx;
    margin-right: 12rpx;
  }
  
  &__content {
    flex: 1;
    position: relative;
    height: 100%;
    overflow: hidden;
  }
  
  &__text {
    height: 100%;
    display: flex;
    align-items: center;
    
    &--scrollable {
      position: absolute;
      white-space: nowrap;
      animation: fu-notice-scroll linear infinite both;
      
      &:nth-child(2) {
        animation-delay: 50%;
      }
    }
  }
  
  &__close {
    font-family: 'fuIcon';
    font-size: 32rpx;
    margin-left: 12rpx;
    cursor: pointer;
    
    &:active {
      opacity: 0.7;
    }
  }
}

@keyframes fu-notice-scroll {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}
</style> 